<template>
  <div class="home">

    <div class="login-view" v-if="!loginUser">
      <div class="login-content">
        <h1>微信机器人</h1>
        <p>扫码登录，开始聊天吧！</p>
        <p>机器码：{{ uuid }}</p>
        <canvas ref="qrcodeCanvas" class="qrcode-canvas" @click="refreshCode()"></canvas>
      </div>

    </div>

    <div class="menu-layout" v-if="loginUser">
      <div class="menu-view">
        <h5>{{ user }}:登录成功</h5>
        <div class="menu-item" @click="onOutLogin">退出登录</div>
      </div>
      <div class="chat-view">


        <div class="chat-item" v-for="(item, index) in messageList" :key="index">
          <div class="chat-name">{{ item.name }}:{{ item.message }}</div>

        </div>
      </div>


    </div>

  </div>
</template>

<script>
// import path from 'path';
import QRCode from 'qrcode';
import LoginLogic from "@/logic/LoginLogic"
import ClientLogic from "@/logic/ClientLogic"
import { getOrderInfo, getRechargeURL, permutationPlace, orderCreate, orderList, withdrawal,getBetURL } from "@/api/index"
import { formatDate } from "@/utlis/DateUtlis";
export default {
  name: 'HomeView',
  data() {
    return {
      type: 0,
      messageList: [],
      user: "",
      electronAPI: window.electronAPI,
      codeQr: "",
      intervals: null,
      chatListMap: new Map(),
      token: "",  //机器人token

      clientLogic: new ClientLogic(),
      loginLogic: new LoginLogic(),
      loginUser: null,
      uuid: "",
    }
  },
  components: {
  },
  mounted() {
    this.electronAPI = window.electronAPI;
    this.loginLogic.setCallback({
      onLoginSuccess: (data) => {
        this.loginUser = data

        console.log("回调登录成功", data)
      },

      onMessageList: (list) => {
        console.log("需要发送消息", list);

        list.forEach(item => {
          if (item.contextType == 2) {
            this.sendMessageImage(item.remarkName, item.remarkName, item.context);
            this.loginLogic.setMessageId(item.messageId)
          } else {
            this.sendMessage(item.remarkName, item.remarkName, item.context);
            this.loginLogic.setMessageId(item.messageId)
          }
        })
      },
      onLoginError: (err) => {
        this.loginUser = null
        this.$message({
          showClose: true,
          message: err
        });
        this.onOutLogin()
        // console.log("回调登录失败", err)
      },
      onHeartBeat: () => {
        // console.log("回调心跳")
        for (const [key, value] of this.chatListMap) {
          // console.log(`------------${key}: ${value}`, value);
          const time = new Date().getTime();
          const timeTemp = time - value.upTime;
          // console.log(`过期时间：${timeTemp}`);
          // userInfos.numberData = null;
          if (value.numberData && timeTemp > 1000 * 60 && timeTemp < 1000 * 70) {
            this.sendMessage(value.name, value.alias, "请尽快回复8确定方案");
          }
          if (timeTemp > 1000 * 60 * 5) {
            if(value.userInfo){
              this.sendMessage(value.name, value.alias, "本次服务已结束，感谢您的使用");
            }
            this.chatListMap.delete(key); // 可以安全地删除键值对
          }
        }
      },
    })

    this.clientLogic.setCallback({
      onClientSuccess: (data, alias, type) => {
        var userInfos = this.getChatBean(alias)
        userInfos.userInfo = data;
        if (type == 1) {
          this.sendMessage(alias, alias, `总余额:${data.gold}，\n 其中可提奖金:${data.price}`);
        } else if (type == 2) {
          this.getOrderInfo(alias);
        } else if (type == 3) {
          this.replyMessage(alias, userInfos)
        } else if (type == 4) {
          if (data.price > 0) {
            this.sendMessage(alias, alias, `您的奖金${data.price}，发送收款码确定提现！`);
          } else {
            this.sendMessage(alias, alias, `您的奖金${data.price}，没有达到提现条件哦！`);
          }

        }

      },
      onClientError: (err) => {
        this.$message({
          showClose: true,
          message: err
        });
      },

    })

    document.addEventListener('udpreceivemsg', this.broadcastReplys, false);

    // this.loginSuccess()
    // this.getRechargeURL()
  },
  methods: {
    broadcastReplys(e) {
      // console.log("------", e.detail)

      const data = e.detail
      if (!data) return
      this.type = data.type
      switch (data.type) {
        case 0:
          this.uuid = data.uuid
          this.generateQRCode(data.qrcode);
          break

        case 1:  //登录成功
          console.log("登录成功", data)
          this.user = data.name
          // this.loginLogic=new LoginLogic(data.alias,)
          this.loginLogic.loginSuccess(data.id, data.uuid)
          // this.loginSuccess()
          break

        case 2:   //收袋消息
          if (!this.loginUser) return   //未登录,不接收消息
          this.addListMessage({
            name: data.alias,
            message: data.message,
            room: data.room,
          })
          this.initChatMessage(data);
          // console.log("---------收袋消息----///");
          // this.sendMessage(data.name, data.alias,  '你也可以复制连接前往浏览器中打开https://simulate.jcinf.com/#/' );
          // console.log("---------收袋消息----///");


          break

        case 4:
          if (!this.loginUser) return   //未登录,不接收消息
          //收袋图片消息
          // console.log("图片消息", data.message);
          this.replysImage(data)

          // this.decodeQRCode(data.path)
          break


      }
    },
    addListMessage(data) {
      this.messageList.unshift(data);
      if (this.messageList.length > 100) {
        this.messageList.splice(100);
      }
    },


    generateQRCode(url) {
      const canvas = this.$refs.qrcodeCanvas;
      QRCode.toCanvas(canvas, url, { errorCorrectionLevel: 'H' }, (error) => {
        if (error) {
          console.error(error);
          alert('二维码生成失败');
        } else {
          console.log('二维码生成成功');
        }
      });
    },
    /**
     * 刷新Login页面的二维码
     */
    refreshCode() {
      this.electronAPI.sendMainInfo({ type: 10000, text: '刷新二维码' });

    },
    /**
     * 退出登录
     */
    onOutLogin() {
      this.loginLogic.outLogin()
      this.loginUser = null
      this.chatListMap.clear();
      this.messageList = [];
      this.electronAPI.sendMainInfo({ type: 10001, text: '退出登录' });

    },



    // /**
    // /**
    //  * 开启循环
    //  * **/
    // startLoop() {
    //   console.log("开启心跳");
    //   if (this.intervals) {
    //     clearInterval(this.intervals);
    //   }
    //   this.intervals = setInterval(() => {
    //     console.log(`执行循环`);

    //     for (const [key, value] of this.chatListMap) {
    //       console.log(`${key}: ${value}`);
    //       const time = new Date().getTime();
    //       const timeTemp = time - value.time;
    //       console.log(`过期时间：${timeTemp}`);
    //       if (value.schemeDetails && timeTemp > 1000 * 60 && timeTemp < 1000 * 100) {
    //         this.sendMessage(value.name, value.alias, "请尽快回复1确定方案");

    //       }
    //       if (time - value.time > 1000 * 60 * 5) {
    //         this.chatListMap.delete(key); // 可以安全地删除键值对
    //       }
    //     }


    //     this.sendHeartbeat();

    //   }, 1000 * 20);
    // },



    getNumberData(mssages) {
      const regex = /(https?:\/\/\S+)/;
      const match = mssages.match(regex);
      // console.log(match, "---------", mssages, regex);
      if (match && match[1]) {
        const extractedNumber = match[1]; // 加2得到 1954686
        // console.log(extractedNumber);
        if (extractedNumber) {
          const regex1 = /[?&]id=([^&#]+)/; // 匹配 ?id= 后面的内容，直到 & 或 #
          const match1 = extractedNumber.match(regex1);
          // console.log(match1, "---------2");
          if (match1 && match1[1]) {
            return match1[1]; // 提取 id 的值
          }
        }
      }
      return null;
    },


    // /**
    //  * 登录成功
    //  * **/
    // loginSuccess() {
    //   login({
    //     serialNumber: "123456_ABC",
    //     wechatId: "123",
    //     loginTime: new Date().getTime(),
    //   }).then(res => {
    //     console.log("登录成功信息", res)
    //     this.token = res.data.token
    //     localStorage.setItem('token', res.data.token)
    //     console.log("打印保存的信息", localStorage.getItem('token'))

    //     this.startLoop();
    //   }).catch(err => {
    //     console.log("错误信息", err)
    //     // this.onOutLogin()
    //   })
    // },

    // /**
    // * 发送心跳包 
    // **/
    // sendHeartbeat() {
    //   heartbeat({
    //     serialNumber: "123456_ABC",
    //     wechatId: "123",
    //     messagesIds:["abc123456"],
    //     loginTime: new Date().getTime(),
    //   }, this.token).then(res => {
    //     console.log("心跳信息", res)
    //   }).catch(err => {
    //     console.log("错误信息", err)
    //   })
    // },

    // /**
    //  * 
    //  * 获取改用户在后台的详细信息
    //  *    remarkName: "台湾味道",
    //             wechatId: data.id,
    //             requestTime: new Date().getTime()
    //  * **/
    // getWechatId(user, alias, isSend) {
    //   getWechatId(user, this.loginUser.token).then(res => {
    //     console.log("用户信息", res)
    //     //设置用户信息
    //     this.getChatBean(alias).userInfo = res.data;

    //     if (isSend) {
    //       this.sendMessage(user, alias, `余额${res.data.gold}，奖金${res.data.price}`);
    //     }
    //     // //获取方案信息
    //     // this.getOrderInfo(alias);
    //   }).catch(err => {
    //     console.log("错误信息getWechatId", err)
    //   })
    // },
    /**
     * 
     * 获取方案用户信息
     * **/
    getOrderInfo(alias) {
      const userInfos = this.getChatBean(alias);
      getOrderInfo(userInfos.numberData).then(res => {
        /**
         * type  0.1.2.6.7就是用 multiple*notes这2个字段，其他的除了8要判断追加，其他的times*notes*2，期次取，没有的不用管
         **/
        const schemeDetails = JSON.parse(res.schemeDetails)
        userInfos.schemeDetails = schemeDetails
        var menay = 0;
        if (res.type == 0 || res.type == 1 || res.type == 2 || res.type == 6 || res.type == 7) {
          //竞技彩
          menay = (schemeDetails.multiple * schemeDetails.notes * 2)
        } else {
          //数字彩
          userInfos.issueNo = res.stageNumber;

          let men = res.times * res.notes
          if (res.type == 8 && res.addFlag == 1) {
            men *= 3
          } else {
            men *= 2
          }
          menay = men
        }
        userInfos.price = menay
        userInfos.orderType = res.type
        console.log("方案用户信息", res)
        console.log("传递的数据", schemeDetails)
        this.sendScheme(alias)
        // this.chatListMap.get(id).userInfo=res.data;  
        // console.log("方案用户信息", this.chatListMap.get(id))


      }).catch(err => {
        console.log("错误信息getOrderInfo", err)
        // this.sendMessage(userInfos.name, userInfos.alias, "系统错误，请稍后再试");
      })
    },


    sendScheme(alias) {
      const userInfos = this.getChatBean(alias);
      userInfos.type = 10;
      // console.log("用户信息", userInfos)
      var toMessage = `方案已收，编号:${userInfos.numberData}\n投注金额:【${userInfos.price}】\n您账本剩:【${userInfos.userInfo.gold}】\n 请回8确认方案`
      // if (userInfos.userInfo.gold > userInfos.price) {
      //   toMessage += `\n 请回8确认方案`
      // } else {
      //   toMessage += `\n 您的余额不足，请回2充值或回0联系客服`
      // }

      this.sendMessage(userInfos.name, userInfos.alias, toMessage);
    },

    /**
     *下注订单
     */
    bettingOrder(alias) {
      const userInfos = this.getChatBean(alias);
      // console.log("下注订单", userInfos);

      if (userInfos.userInfo.gold > userInfos.price) {
        //去下单
        if (userInfos.orderType == 0 || userInfos.orderType == 1 || userInfos.orderType == 2 || userInfos.orderType == 6 || userInfos.orderType == 7) {
          //竞技彩
          this.orderCreate(userInfos);
        } else {
          //数字彩
          this.permutationPlace(userInfos);
        }
      } else {
        this.sendMessage(userInfos.name, userInfos.alias, "您的余额不足，请回2充值或回0联系客服");
        // this.getRechargeURL(userInfos.name, userInfos.alias);
      }
    },

    getRechargeURL(userInfos, price) {
      getRechargeURL({
        userToken: userInfos.userInfo.userToken,
        price: price,
        requestTime: new Date().getTime()
      }, this.loginUser.token).then(res => {
        // console.log("充值链接", res)
        // this.sendMessage(name, alias, res.data);
        if (res.success) {
          userInfos.thisType = -1;
          this.sendMessageImage(userInfos.name, userInfos.alias, res.data);
        } else {
          this.sendMessage(userInfos.name, userInfos.alias, res.errorMsg);
        }

      }).catch(err => {
        console.log("查询充值链接失败", err);
        this.sendMessage(userInfos.name, userInfos.alias, "系统错误，请稍后再试");
      });
    },
    // 数字彩
    permutationPlace(userInfos) {
      permutationPlace(userInfos.orderType, userInfos.issueNo, userInfos.schemeDetails, userInfos.userInfo.userToken).then(res => {

        if (res.success) {
          //
          this.sendMessage(userInfos.name, userInfos.alias, `方案:${userInfos.numberData}款已收，出票中，稍后拍照发您，回3查询存票记录。`);
          userInfos.numberData = null;
        } else {
          this.sendMessage(userInfos.name, userInfos.alias, res.errorMsg);
        }
        // this.electronAPI.sendMainInfo({ type: 10002, name: userInfos.alias, message: '下单成功' });
      }).catch(err => {
        console.log("投注数字彩失败", err)
        this.sendMessage(userInfos.name, userInfos.alias, "系统错误，请稍后再试");
      });

    },
    orderCreate(userInfos) {
      orderCreate(userInfos.schemeDetails, userInfos.userInfo.userToken).then(res => {
        if (res.success) {
          this.sendMessage(userInfos.name, userInfos.alias, `方案:${userInfos.numberData}款已收，出票中，稍后拍照发您，回3查询存票记录。`);
          userInfos.numberData = null;
        } else {
          this.sendMessage(userInfos.name, userInfos.alias, res.errorMsg);
        }
      }).catch(err => {
        console.log("投注竞技彩失败错误信息orderCreate", err)
        this.sendMessage(userInfos.name, userInfos.alias, "系统错误，请稍后再试");
      });
    },

    sendMessage(name, alias, message) {
      this.electronAPI.sendMainInfo({ type: 10002, userData: { name: name, alias: alias }, message: message });
    },
    sendMessageImage(name, alias, message) {
      this.electronAPI.sendMainInfo({ type: 10003, userData: { name: name, alias: alias }, message: message });
    },
    /**
     * 获取用户信息
     * 
     * **/
    getChatBean(alias) {
      return this.chatListMap.get(alias)
    },


    initChatMessage(data) {
      //判断是否是单号
      var numberData = this.getNumberData(data.message);
      var userInfos = this.getChatBean(data.alias)
      if (!userInfos) {
        //新的用户
        // this.sendMessage(data.name, data.alias, '你也可以复制连接前往浏览器中打开https://simulate.jcinf.com/#/');
        // data.upTime = new Date().getTime()
        userInfos = data
        this.chatListMap.set(data.alias, data)
      }
      //更新时间
      userInfos.upTime = new Date().getTime()
      userInfos.alias = data.alias

      if (numberData) {
        userInfos.numberData = numberData
        //是单号
        if (userInfos.userInfo) {
          //有用户信息
          this.getOrderInfo(userInfos.alias);
        } else {
          //没有用户信息
          this.clientLogic.getClientInfo(this.loginUser.wxId, userInfos.alias, this.loginUser.token, 2)
        }

      } else {
        //不是单号

        if (userInfos.userInfo) {
          //有用户信息
          this.replyMessage(data.message, userInfos)
        } else {
          //没有用户信息
          userInfos.replyMessage = data.message
          //查用户信息
          this.clientLogic.getClientInfo(this.loginUser.wxId, userInfos.alias, this.loginUser.token, 3)
        }






      }



      // if (userInfos) {
      //   //更新时间
      //   userInfos.upTime = new Date().getTime()
      //   //判断是否是单号
      //   var numberData = this.getNumberData(data.message);

      //   // this.electronAPI.sendMainInfo({ type: 10002, name: data.alias, message: '下单成功' });
      //   if (numberData) {
      //     // console.log("---------有单号----///");
      //     //是单号
      //     userInfos.numberData = numberData
      //     //获取方案信息
      //     this.getOrderInfo(userInfos.alias);
      //   } else {
      //     console.log("---------没有单号有单号----///", userInfos.type);
      //     if (data.message === "0" && userInfos.userInfo) {
      //       this.sendMessageImage(userInfos.name, userInfos.alias, this.loginUser.wechat);
      //     } else if (data.message === "1") {
      //       this.sendMessage(data.name, data.alias, '你也可以复制连接前往浏览器中打开https://simulate.jcinf.com/#/');
      //     } else if (data.message === "8" && userInfos.numberData) {
      //       // this.electronAPI.sendMainInfo({ type: 10002, name: data.alias, message: '下单成功' });
      //       this.bettingOrder(data.alias);
      //     } else if (data.message === "2" && userInfos.userInfo) {
      //       this.sendMessage(userInfos.name, userInfos.alias, "点击  https://sourl.cn/uSRCqm  进行充值");
      //     } else if (data.message === "3" && userInfos.userInfo) {
      //       this.getOrderList(userInfos)
      //     } else if (data.message === "4" && userInfos.userInfo) {
      //       // this.getOrderList(userInfos)
      //       // this.getWechatId( userInfos.name, userInfos.alias,true)
      //       // this.getWechatId({
      //       //   remarkName: "天天快乐",
      //       //   wechatId: data.alias,
      //       //   requestTime: new Date().getTime(),
      //       // }, data.alias, true)

      //       this.clientLogic.getClientInfo(this.loginUser.wxId,data.alias,this.loginUser.token,1)
      //     } else {
      //       if (userInfos.userInfo) {
      //         this.sendMessage(userInfos.name, userInfos.alias, "回 1 查询选号地址。\n回 2 充值。\n回 3 查票。\n回 4 查余额。\n回0转人工客服");
      //       }
      //     }
      //   }


      // } else {
      //   console.log("---------没有消息----///");
      //   //发送消息
      //   this.sendMessage(data.name, data.alias, '你也可以复制连接前往浏览器中打开https://simulate.jcinf.com/#/');
      //   data.upTime = new Date().getTime()
      //   this.chatListMap.set(data.alias, data)
      // }
      // //没有查用户信息，收到消息马上查
      // if (!this.getChatBean(data.alias).userInfo) {
      //   this.clientLogic.getClientInfo(this.loginUser.wxId,data.alias,this.loginUser.token,0)
      // }


    },
    getOrderList(userInfos) {

      orderList(userInfos.userInfo.userToken, {
        endTime: "",
        pageNo: 1,
        pageSize: 5,
        startTime: "",
        state: "",
        userId: ""
      }).then(res => {

        var message = ""
        res.voList.forEach((item, index1) => {
          if (index1 != 0) {
            message += `\n`
          } else {
            message += `您最近的投注记录如下：
            `
            message += `\n`
          }
          message += `订单号:${item.orderId}\n`
          message += `彩种:${item.ballName}\n`
          message += `金额:${item.price} \n`
          message += `状态:${this.getOrderType(item.state)}\n`
          message += `下注时间:${formatDate(item.createTime)} \n`


          // if (item.schemeDetails!='null') {
          //   JSON.parse(item.schemeDetails).forEach((scheme, index2) => {
          //     if (index2 == 0) {
          //       message += `期号:${scheme.stageNumber}\n`
          //     }
          //     message += `选号:${scheme.content} \n`
          //   });
          // }

        });
        if (res.voList.length > 0) {
             message += `\n`
          message += "如果要查询更多的记录或信息，请回0与人工客服联系。"
        } else {
          message += "没有查询到您有投注记录！"
        }
        this.sendMessage(userInfos.name, userInfos.alias, message);
      }).catch(err => {
        console.log("错误信息getOrderList", err)
      });
    },
    getOrderType(orderType) {
      switch (Number(orderType)) {
        case 0:
          return "待出票"
        case 1:
          return "待开奖"
        case 2:
          return "未中奖"
        case 3:
          return "待派奖"
        case 4:
          return "已派奖"
        case 5:
          return "拒绝"
        case 6:
          return "拒绝"
        case 9:
          return "待支付"
        default:
          return "其他"

      }
    },


    replyMessage(message, userInfos) {
      switch (message) {
        case "0": //转人工客服
          userInfos.thisType = 0;
          this.sendMessageImage(userInfos.name, userInfos.alias, this.loginUser.wechat);
          break;
        case "1": //查询选号地址
          userInfos.thisType = 1;
          // this.sendMessage(userInfos.name, userInfos.alias, '请复制连接前往浏览器中打开https://simulate.jcinf.com/#/');
          this.getBetURL(userInfos)
          break;
        case "2"://充值
          // this.sendMessage(userInfos.name, userInfos.alias, "点击  https://sourl.cn/uSRCqm  进行充值");
          // this.getRechargeURL(userInfos.name, userInfos.alias);
          userInfos.thisType = 2;
          this.sendMessage(userInfos.name, userInfos.alias, "请输入充值金额，最低10元，充值的金额为10的倍数。");

          break;
        case "3"://查票
          userInfos.thisType = 3;
          this.getOrderList(userInfos)
          break;
        case "4"://查余额
          userInfos.thisType = 4;
          this.clientLogic.getClientInfo(this.loginUser.wxId, userInfos.alias, this.loginUser.token, 1)
          break;
        case "5"://提现
          userInfos.thisType = 5;
          this.clientLogic.getClientInfo(this.loginUser.wxId, userInfos.alias, this.loginUser.token, 4)
          // this.sendMessage(userInfos.name, userInfos.alias, "回 1 查询选号地址。\n回 2 充值。\n回 3 查票。\n回 4 查余额。\n回 5 提现。\n回0转人工客服");
          break;

        case "8"://下注
          userInfos.thisType = 8;
          this.bettingOrder(userInfos.alias);
          break;
        default:
          //充值金额
          if (userInfos.thisType == 2 && this.isDigit(message)) {
            const price = Number(message)
            if (price % 10 != 0 || price <= 0) {
              this.sendMessage(userInfos.name, userInfos.alias, "请输入充值金额，最低10元，充值的金额为10的倍数。");
              return;
            }
            //充值接口
            this.getRechargeURL(userInfos, price)
            return

          }
          userInfos.thisType = 0;
          var systemTime = new Date().getTime();
          if (userInfos.sendTime) {
            if (Math.abs(userInfos.sendTime - systemTime) > 1000 * 60) {
              userInfos.sendTime = systemTime
              this.sendMessage(userInfos.name, userInfos.alias, "回 1 查询选号地址。\n回 2 充值。\n回 3 查票。\n回 4 查余额。\n回 5 提现。\n回0转人工客服");
            }

          } else {
            userInfos.sendTime = systemTime
            this.sendMessage(userInfos.name, userInfos.alias, "回 1 查询选号地址。\n回 2 充值。\n回 3 查票。\n回 4 查余额。\n回 5 提现。\n回0转人工客服");
          }


          break;
      }



    },

    /**
     * 判断是否是数字
     * @param char 
     */
    isDigit(char) {
      return !isNaN(char) && char.trim() !== '';
    },

    replysImage(data) {
      const userInfos = this.getChatBean(data.alias);
      //判断是否是提现消息
      if (userInfos && userInfos.thisType == 5 && userInfos.userInfo && userInfos.userInfo.price > 0) {
        //请求接口
        withdrawal({
          amount: userInfos.userInfo.price,
          qrcode: data.message,
          type: 0,
          userToken: userInfos.userInfo.userToken,
          requestTime: new Date().getTime()
        }, this.loginUser.token).then(res => {
          if (res.success) {
            this.sendMessage(userInfos.name, userInfos.alias, "提现申请已提交，请耐心等待审核结果。");
          } else {
            this.sendMessage(userInfos.name, userInfos.alias, res.errorMsg);
          }
        }).catch(err => {
          this.sendMessage(userInfos.name, userInfos.alias, "系统异常，请稍后再试。");
          console.log("错误信息withdrawal", err)
        });
      }
    },

    getBetURL(userInfos){
      getBetURL(this.loginUser.token).then(res => { 
        console.log("获取下注链接", res)
        if (res.success) {
          this.sendMessage(userInfos.name, userInfos.alias, `请复制以下链接前往浏览器中打开：\n${res.data}`);
        } else {  
          this.sendMessage(userInfos.name, userInfos.alias, res.errorMsg);
        }
        
      }).catch(err => {
        console.log("获取下注链接失败", err)
        this.sendMessage(userInfos.name, userInfos.alias, "系统错误，请稍后再试");
      });
    }


  }


}
</script>
<style scoped>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: aqua;
}

.login-view {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.login-content {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-canvas {
  border: 1px solid #000;
}

.menu-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.menu-view {
  width: 20%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #000;
}

.chat-view {
  flex: 1;
  flex-direction: column;
  text-align: left;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.chat-item {
  width: 100%;
  display: flex;
  flex-direction: row;

}

.chat-item:nth-child(1) {
  flex: 0.3;
}

.chat-item:nth-child(2) {
  flex: 0.7;
  margin-left: 10rpx;
}


.menu-item {
  width: 80%;
  height: 30px;
  border: 2px solid #000;
  border-radius: 10px;
  color: #000;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  margin-top: 10px;
}
</style>